<script setup>
const props = defineProps({
    suggest: {
        type: Array,
    }
})
const emit = defineEmits(["doSuggest"])
const sortedSuggest = props.suggest.sort((a, b) => a.length - b.length)

const clickHandler = (e) => {
    emit("doSuggest", e)
}
</script>

<template>
    <div class="chat-box-suggest">
        <template v-for="(sug, index) in sortedSuggest" :key="index">
            <div class="chat-box-suggest-item" @click.stop="clickHandler(sug)">{{ sug }}</div>
        </template>
    </div>
</template>

<style scoped lang="scss">
.chat-box-suggest {
    position: relative;
    display: flex;
    flex-direction: column;

    &-item {
        padding: 10px;
        margin: 5px 0;
        font-size: var(--chat-box-suggest-font-size);
        color: var(--chat-box-suggest-color);
        border: 1px solid rgba(46, 50, 56, 0.05);

        border-radius: 12px;
        cursor: pointer;
    }
}
</style>